<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Perfree-安装</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="Shortcut Icon" href="/static/public/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/admin/static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/admin/static/admin/css/loader.css" />
    <link href="/static/admin/pages/install/css/install.css?v=#(version)" rel="stylesheet"/>
    <script type="text/javascript">
        window.onload = function f() {
            setTimeout(function () {
                document.getElementById("loading-box").style.display="none";
            }, 500);
        };
    </script>
</head>
<body>
<!-- 加 载 动 画 -->
<div class="loader-main" id="loading-box">
    <!-- 动 画 对 象 -->
    <div class="loader"></div>
</div>
<div class="p-install-box">
    <div class="p-install-box-title">Perfree-安装</div>

    <div class="layui-card">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                    <div carousel-item>
                        <div class="ready-box">
                            欢迎使用<a href="http://www.perfree.org.cn" target="_blank">perfreeBlog</a>,在开始前,您需要知道,
                            perfreeBlog同时支持
                            <a href="https://www.mysql.com" target="_blank">mysql</a> 和
                            <a href="http://www.sqlite.org" target="_blank">sqlite</a>数据库,
                            我们默认推荐您使用mysql数据库带来更好的体验!
                            <h3><i class="layui-icon layui-icon-next" style="font-weight: 900;"></i>  准备工作</h3>
                            <div class="part">
                                <p>1. 如选择mysql数据库,则需要您提前安装好mysql数据库,并提供以下信息:</p>
                                <ul class="text-ind">
                                    <li>数据库用户名</li>
                                    <li>数据库密码</li>
                                    <li>数据库主机地址</li>
                                    <li>数据库端口号</li>
                                </ul>
                                <p>2. 如选择sqlite数据库,则不需要提供任何信息</p>
                                <span class="text-ind">如您已准备好以上工作,点击下方"开始安装"按钮即可开始安装</span>
                            </div>
                            <h3><i class="layui-icon layui-icon-next" style="font-weight: 900;"></i>  许可协议</h3>
                            <p>perfreeBlog基于GPL协议发布,我们允许用户在GPL协议许可的范围内使用,拷贝,修改和发布此程序,您可以自由的将其用于商业以及非商业用途中</p>
                            <h3><i class="layui-icon layui-icon-next" style="font-weight: 900;"></i>  官方地址</h3>
                            <ul>
                                <li>官网地址: <a href="http://www.perfree.org.cn" target="_blank">http://www.perfree.org.cn</a></li>
                                <li>文档地址: <a href="http://perfree.gitee.io" target="_blank">http://perfree.gitee.io</a></li>
                                <li>源码地址: <a href="https://github.com/perfree/PerfreeBlog" target="_blank">https://github.com/perfree/PerfreeBlog</a></li>
                            </ul>
                            <div class="button-box">
                                <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                    &emsp;开始安装&emsp;
                                </button>
                            </div>
                        </div>
                        <div>
                            <form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;padding-top: 10px;">
                                <div class="install-form-box">
                                    <span class="p-form-tip">数据库类型:</span>
                                    <select name="type" required lay-verify="required" lay-filter="type">
                                        <option value="mysql">mysql</option>
                                        <option value="sqlite">sqlite</option>
                                    </select>
                                </div>
                                <div id="mysql-message">
                                    <div class="install-form-box">
                                        <span class="p-form-tip">数据库地址:</span>
                                        <input type="text" name="address" placeholder="请输入数据库地址,如127.0.0.1" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="install-form-box">
                                        <span class="p-form-tip">数据库端口:</span>
                                        <input type="text" name="port" placeholder="请输入数据库端口,如3306" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="install-form-box">
                                        <span class="p-form-tip">数据库名:</span>
                                        <input type="text" name="dataBaseName" placeholder="请输入数据库名,默认perfree" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="install-form-box">
                                        <span class="p-form-tip">数据库用户名:</span>
                                        <input type="text" name="userName" placeholder="请输入数据库用户名,如root" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="install-form-box">
                                        <span class="p-form-tip">数据库密码:</span>
                                        <input type="text" name="password" placeholder="请输入数据库密码,如123456" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="button-box">
                                    <button type="button" class="pear-btn pear-btn-success pre">上一步</button>
                                    <button class="pear-btn pear-btn-success" style="margin-left: 5px" lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;padding-top: 10px;">
                                <div class="install-form-box">
                                    <span class="p-form-tip">管理员账户:</span>
                                    <input type="text" name="account" required  lay-verify="required" placeholder="请输入管理员账户名" autocomplete="off" class="layui-input">
                                </div>

                                <div class="install-form-box">
                                    <span class="p-form-tip">管理员密码:</span>
                                    <input type="password" name="password" required  lay-verify="required" placeholder="请输入管理员密码" autocomplete="off" class="layui-input">
                                </div>

                                <div class="install-form-box">
                                    <span class="p-form-tip">管理员邮箱:</span>
                                    <input type="email" name="email" required  lay-verify="required" placeholder="请输入管理员邮箱地址" autocomplete="off" class="layui-input">
                                </div>
                                <div class="button-box">
                                    <button class="pear-btn pear-btn-success" style="margin-left: 5px" lay-submit lay-filter="formStep3">
                                        &emsp;完成安装&emsp;
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="/static/admin/static/component/pear/pear.js"></script>
<script src="/static/admin/pages/install/js/install.js"></script>
</body>
</html>